
      <div class="row">
        <div class="col-md-4 order-md-2 mb-4">
          <h4 class="d-flex justify-content-between align-items-center mb-3">
            <span class="text-muted">Address Book</span>
            <span class="badge badge-secondary badge-pill">{{addresses.length}}</span>
          </h4>

          <a href ng-click="getAddresses()" class="btn">Refresh</a>

          <ul class="list-group mb-3" ng-repeat="(address, alias) in addresses">
            <li class="list-group-item d-flex justify-content-between lh-condensed">
              <div>
                <h6 class="my-0">{{alias}}</h6>
                <small class="text-muted">{{address}}</small>
                <a href ng-click="remove(address)">Delete</a>
              </div>
            </li>
          </ul>


        </div>
        <div class="col-md-8 order-md-1">
          <h4 class="mb-3">Add Address</h4>
          <form ng-submit="add()" class="needs-validation" novalidate>

            <div class="mb-3">
              <label for="email">Address </label>
              <input type="text" class="form-control" ng-model="address" name="address" placeholder="0x0123456789abc...">
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>

            <div class="mb-3">
              <label for="address">Alias</label>
              <input type="text" class="form-control" ng-model="alias" name="alias" placeholder="Example Name" required>
              <div class="invalid-feedback">
                Please enter your shipping address.
              </div>
            </div>

            <hr class="mb-4">
            <button class="btn btn-primary btn-lg btn-block" type="submit">Add to address book</button>
          </form>
        </div>
      </div>
